import React, { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { Button, Space, Image, Popconfirm, Modal, Badge, Input, Table, InputNumber, Spin, App } from 'antd'
import { EditTwoTone, PlusOutlined } from '@ant-design/icons'
import { useModel } from '@umijs/max'

export default () => {
  const [isLoading, setIsLoading] = useState(false)
  const { message } = App.useApp()

  const originColumns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '自提点名称',
      dataIndex: 'name',
      render: text => <b>{text}</b>
    },
    {
      title: '省份',
      dataIndex: 'prov'
    },
    {
      title: '城市',
      dataIndex: 'city'
    },
    {
      title: '地区',
      dataIndex: 'area'
    },
    {
      title: '地址',
      dataIndex: 'detail_address'
    },
    {
      title: '联系电话',
      dataIndex: 'tel'
    },
    {
      title: '启用状态',
      dataIndex: 'status',
      width: 80,
      valueEnum: {
        1: {
          text: '启用中',
          status: 'Success'
        },
        0: {
          text: '已停用',
          status: 'Default'
        }
      }
    },
    {
      title: '创建时间',
      dataIndex: 'created_at'
    },
    {
      title: '操作',
      key: 'option',
      width: 180,
      valueType: 'option',
      fixed: 'right',
      render: (_, row, index, action) => {
        return [
          // <a
          //   key='check'
          //   onClick={() => {
          //     goSelfDetail(3, row.id)
          //   }}
          // >
          //   详情
          // </a>,
          <a
            key='edit'
            onClick={() => {
              goSelfDetail(2, row.id)
            }}
          >
            编辑
          </a>,
          row.status === 1 ? (
            <Popconfirm
              key='downShelf'
              title='是否确认停用该自提点?'
              onConfirm={() => handleShelf(2, row.id)}
              okText='确认'
              cancelText='取消'
            >
              <a key='status' style={{ color: 'red' }}>
                停用
              </a>
            </Popconfirm>
          ) : (
            <a
              key='upShelf'
              onClick={() => {
                handleShelf(1, row.id)
              }}
              style={{ color: '#1677ff' }}
            >
              启用
            </a>
          ),
          <Popconfirm
            key='delete'
            title='是否确认将该自提点删除?'
            onConfirm={() => handleDeleteItem(row.id)}
            okText='确认'
            cancelText='取消'
          >
            <a key='delete' style={{ color: 'red' }}>
              删除
            </a>
          </Popconfirm>
        ]
      }
    }
  ]
  const { GetBackendOwnTakeList, UpdateOwnTakeStatus, DeleteOwnTake } = useModel('Deliver')

  // 分页
  const [currentPage, setCurrentPage] = useState(1) //  当前页码

  // 商品列表
  const [columns, setColumns] = useState(originColumns)

  const tableRef = useRef()

  // 跳转商品页
  const goSelfDetail = (type, id) => {
    let url = `/pickupPoint?type=${type}`
    if (type !== 1 && id) {
      url += `&id=${id}`
    }
    window.open(url)
  }

  // 处理商品上下架
  const handleShelf = async (type, id) => {
    const params = {
      id
    }
    await UpdateOwnTakeStatus(params)
    tableRef.current.reload()
    message.success(type === 1 ? '启用成功' : '停用成功')
  }

  // 删除
  const handleDeleteItem = async id => {
    await DeleteOwnTake({id})
    tableRef.current.reload()
    message.success('删除成功')
  }

  return (
    <>
      {isLoading && <Spin />}

      <ProTable
        params={{
          pageSize: 10
        }}
        // scroll={{x: 'max-content'}}
        actionRef={tableRef}
        search={false}
        request={async (params, sort, filter) => {
          const param = {
            page: params.current,
            pageSize: params.pageSize,
            goods_name: params.goods_name,
            id: params.id,
            after_approval_status: params.after_approval_status
          }
          const res = await GetBackendOwnTakeList(param)
          setCurrentPage(params.current)
          return {
            data: res.data,
            success: true,
            total: res.total
          }
        }}
        pagination={{
          pageSize: 10,
          current: currentPage
        }}
        rowKey='id'
        columns={columns}
        headerTitle={
          <Button icon={<PlusOutlined />} onClick={() => goSelfDetail(1)} key={Math.random().toString()} type='primary'>
            新增自提点
          </Button>
        }
      />
    </>
  )
}
